<template>
	<div id="myLogin">
		<el-dialog title="登录" width="300px" center :visible.sync="isLogin">
			<el-form :model="LoginUser" ref="ruleForm" class="demo-ruleForm">

				<el-form-item>
					<el-input prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="LoginUser.name"></el-input>
				</el-form-item>

				<el-form-item>
					<el-input prefix-icon="el-icon-view" type="password" placeholder="请输入密码" v-model="LoginUser.pass"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button size="medium" type="primary" @click="login" style="width:100%;">登录</el-button>
				</el-form-item>

			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import { mapActions } from "vuex";
	
	export default {
		name: "MyLogin",

		data() {
			return {
				LoginUser: {
					name: "",
					pass: ""
				},
			}
		},
		computed: {
			// 获取vuex中的showLogin，控制登录组件是否显示
			isLogin: {
				get() {
					return this.$store.getters.getShowLogin;
				},
				set(val) {
					this.$refs["ruleForm"].resetFields();
					this.setShowLogin(val);
				}
			}
		},
		methods: {
			...mapActions(["setUser", "setShowLogin"]),
			login() {
				// TODO element 自定义表单校验规则
				// TODO 登录API
				var res = {
					data:{
						code: "001",
						msg: "登陆成功！",
						user:{
							userName:'zzl',
							userId:'123'
						}
					}
				}
				if (res.data.code === "001") {
				  // 隐藏登录组件
				  this.isLogin = false;
				  // 登录信息存到本地
				  let user = JSON.stringify(res.data.user);
				  localStorage.setItem("user", user);
				  // 登录信息存到vuex
				  this.setUser(res.data.user);
				  // 弹出通知框提示登录成功信息
				  this.notifySucceed(res.data.msg);
				} else {
				  // 清空输入框的校验状态
				  this.$refs["ruleForm"].resetFields();
				  // 弹出通知框提示登录失败信息
				  this.notifyError(res.data.msg);
				}
			}
		}
	}
</script>

<style>
</style>
